<script setup lang="ts">
import { ArrowRight, Edit, Delete } from '@element-plus/icons-vue'
import geekChannel from '@/components/geek-channel.vue'
import { delArticleAPI, getArticleListApI } from '@/apis/article'
import type { ArticleData, ArticleItem } from '@/types/article'
import { ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 表单数据
const reqParams = ref<ArticleData>({
  status: undefined,
  channel_id: null,
  begin_pubdate: null,
  end_pubdate: null,
  page: 1,
  per_page: 2,
})
// 文章列表
const articleList = ref<ArticleItem[]>([])
// 获取时间列表
const dateArr = ref([])
const getArticleList = async () => {
  const res = await getArticleListApI(reqParams.value)
  total.value = res.data.total_count
  articleList.value = res.data.results
}
// 页面加载时,获取文章列表
getArticleList()

const delArticle = async (id: string) => {
  ElMessageBox.confirm('您确定要删除吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await delArticleAPI(id)
      ElMessage.success('删除成功')
      getArticleList()
    })
    .catch(() => {})
}

watch(dateArr, () => {
  if (dateArr.value) {
    reqParams.value.begin_pubdate = dateArr.value[0]
    reqParams.value.end_pubdate = dateArr.value[1]
  } else {
    reqParams.value.begin_pubdate = ''
    reqParams.value.end_pubdate = ''
  }
})

// 求文章数量
const total = ref()

const filterArticles = () => {
  // 重置页码为1
  reqParams.value.page = 1
  // 重新获取文章列表
  getArticleList()
}
</script>

<template>
  <el-card shadow="always">
    <template #header>
      <div>
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </template>
    <el-form label-width="120px">
      <!-- 状态 -->
      <el-form-item label="状态：">
        <!-- 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，不传为全部 -->
        <el-radio-group v-model="reqParams.status">
          <el-radio :label="null">全部</el-radio>
          <el-radio :label="0">草稿</el-radio>
          <el-radio :label="1">待审核</el-radio>
          <el-radio :label="2">审核通过</el-radio>
          <el-radio :label="3">审核失败</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 频道 -->
      <el-form-item label="频道：">
        <geekChannel v-model="reqParams.channel_id" />
      </el-form-item>
      <!-- 日期 -->
      <el-form-item label="日期：" style="width: 460px">
        <el-date-picker
          v-model="dateArr"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetimerange"
          start-placeholder="Start date"
          end-placeholder="End date"
          format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY/MM/DD ddd"
          time-format="A hh:mm:ss"
        />
      </el-form-item>
      <!-- 筛选 -->
      <el-form-item>
        <el-button type="primary" @click="filterArticles()">筛选</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 数据 -->
  <el-card class="el_card">
    <template #header>
      <div>根据筛选条件共查询到 {{ total }} 条数据</div>
    </template>
    <el-table :data="articleList">
      <el-table-column label="封面" width="200">
        <template v-slot="scoped">
          <el-image
            style="width: 100px; height: 100px"
            :src="scoped.row.cover.images[0]"
            :preview-src-list="scoped.row.cover.images"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :initial-index="4"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column label="标题" width="260px" prop="title"></el-table-column>
      <el-table-column label="状态" width="180px" prop="status">
        <template v-slot="scoped">
          <el-tag v-if="scoped.row.status === 0" type="Info">草稿</el-tag>
          <el-tag v-if="scoped.row.status === 1">待审核</el-tag>
          <el-tag v-if="scoped.row.status === 2" type="success">审核成功</el-tag>
          <el-tag v-if="scoped.row.status === 3" type="warning">审核失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" width="300px" prop="pubdate"></el-table-column>
      <el-table-column label="阅读数" width="160px" prop="read_count"></el-table-column>
      <el-table-column label="评论数" width="160px" prop="comment_count"></el-table-column>
      <el-table-column label="点赞数" width="160px" prop="like_count"></el-table-column>
      <el-table-column label="操作" width="160px">
        <template v-slot="scoped">
          <el-button type="primary" @click="$router.push(`/publish/${scoped.row.id}`)" circle plain>
            <el-icon><Edit /></el-icon>
          </el-button>
          <el-button type="danger" @click="delArticle(scoped.row.id)" circle plain>
            <el-icon><Delete /></el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-sizes="[2, 5, 10, 20]"
      v-model:current-page="reqParams.page"
      v-model:page-size="reqParams.per_page"
      @change="getArticleList()"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
  </el-card>
</template>

<style scoped>
/* 样式 */
.el_card {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
